<template>
  <div>
    
    <el-card class="box-card">
      <!-- 按钮 -->
      <div class="odiv">

      </div>
     <div class="but">
          <el-button size="medium" @click="previewbtn" class="btn1"
            >预览</el-button
          >
          <el-button class="keep" size="medium" @click="saveTable"
            >保存</el-button
          >
          <el-button size="medium" @click="cancel" class="btn2">取消</el-button>
          <el-button
            size="medium"
            @click="deleteTab"
            type="danger"
            style="margin-right: 0; color:#fff; border: 1px solid #f56c6c;"
            >重置</el-button
          >
        </div>
 <div class="bigbox">
      <div class="one">
        
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            ><span style="color: gray">资源配置</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>轮播图配置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="card_content">
        <!-- 左侧导航部分 -->
        <div class="card_left">
          <p class="wz">{{ title }}</p>
          <el-input
            class="input"
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            suffix-icon="el-icon-search"
          >
          </el-input>
          <!-- <div class="search" @click="searchMenu">
            <img src="./table_img/search.png" alt="" />
          </div> -->
          <el-tree
            class="filter-tree"
            :data="tableData"
            check-on-click-node
            :props="defaultProps"
            default-expand-all
            node-key="id"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            ref="tree"
            render-after-expand
          >
          </el-tree>
        </div>
        <!-- 中间输入框部分 -->
        <div class="card_middle">
          <!-- 第一栏上传图片 -->
          <el-form
            :model="ruleForm1"
            ref="ruleForm1"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="轮播图1:" prop="image1" class="content_one">
              <div class="close_small" v-if="oneUrl" @click="closeOne">
                <img src="./table_img/icon_clos.png" alt="" />
              </div>
              <el-upload
                class="avatar-uploader avatar_top"
                action="#"
                :show-file-list="false"
                :http-request="oneRequest"
                :on-change="oneHeadleChange"
                :disabled="onedisabled"
                accept="image/*"
              >
                <img v-if="oneUrl" :src="oneUrl" class="avatar" />
                <div class="upImg" v-show="!oneUrl">
                  <div>
                    <img src="@/views/partner/partner_img/Icon_up.png" alt="" />
                  </div>
                  <!-- <span>请上传logo</span> -->
                </div>
              </el-upload>
              <span class="hint">支持JPG、PNG格式，不超过3MB</span>
            </el-form-item>
            <!-- 第二栏上传图片 -->
            <el-form-item label="轮播图2:" prop="image2" class="content_one">
              <div class="close_small" v-if="twoUrl" @click="closeTwo">
                <img src="./table_img/icon_clos.png" alt="" />
              </div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="twoRequest"
                :on-change="twoHeadleChange"
                :disabled="twodisabled"
                accept="image/*"
              >
                <img v-if="twoUrl" :src="twoUrl" class="avatar" />
                <div class="upImg" v-show="!twoUrl">
                  <div>
                    <img src="@/views/partner/partner_img/Icon_up.png" alt="" />
                  </div>
                  <!-- <span>请上传logo</span> -->
                </div>
              </el-upload>
              <span class="hint">支持JPG、PNG格式，不超过3MB</span>
            </el-form-item>
            <!-- 第三栏上传图片 -->
            <el-form-item label="轮播图3:" prop="image3" class="content_one">
              <div class="close_small" v-if="threeUrl" @click="closeThree">
                <img src="./table_img/icon_clos.png" alt="" />
              </div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="threeRequest"
                :on-change="threeHeadleChange"
                :disabled="threedisabled"
                accept="image/*"
              >
                <img v-if="threeUrl" :src="threeUrl" class="avatar" />
                <div class="upImg" v-show="!threeUrl">
                  <div>
                    <img src="@/views/partner/partner_img/Icon_up.png" alt="" />
                  </div>
                  <!-- <span>请上传logo</span> -->
                </div>
              </el-upload>
              <span class="hint">支持JPG、PNG格式，不超过3MB</span>
            </el-form-item>
            <!-- 第四栏上传图片 -->
            <el-form-item label="轮播图4:" prop="image4" class="content_one">
              <div class="close_small" v-if="fourUrl" @click="closeFour">
                <img src="./table_img/icon_clos.png" alt="" />
              </div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="fourRequest"
                :on-change="fourHeadleChange"
                :disabled="fourdisabled"
                accept="image/*"
              >
                <img v-if="fourUrl" :src="fourUrl" class="avatar" />
                <div class="upImg" v-show="!fourUrl">
                  <div>
                    <img src="@/views/partner/partner_img/Icon_up.png" alt="" />
                  </div>
                  <!-- <span>请上传logo</span> -->
                </div>
              </el-upload>
              <span class="hint">支持JPG、PNG格式，不超过3MB</span>
            </el-form-item>
            <!-- 第五栏上传图片 -->
            <el-form-item label="轮播图5:" prop="image5" class="content_one">
              <div class="close_small" v-if="fiveUrl" @click="closeFive">
                <img src="./table_img/icon_clos.png" alt="" />
              </div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="fiveRequest"
                :on-change="fiveHeadleChange"
                :disabled="fivedisabled"
                accept="image/*"
              >
                <img v-if="fiveUrl" :src="fiveUrl" class="avatar" />
                <div class="upImg" v-show="!fiveUrl">
                  <div>
                    <img src="@/views/partner/partner_img/Icon_up.png" alt="" />
                  </div>
                  <!-- <span>请上传logo</span> -->
                </div>
              </el-upload>
              <span class="hint">支持JPG、PNG格式，不超过3MB</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
</div>
    </el-card>
    <!-- 预览弹窗 -->
    <div class="seeUp" v-show="previewImg">
      <div class="preview">
        <div class="close_img" v-show="closepng" @click="closepngg">
          <img src="./table_img/icon_clos.png" alt="" />
        </div>
        <template>
          <el-carousel
            :interval="2000"
            type="card"
            height="200px"
            style="margin-top:120px;"
          >
            <el-carousel-item v-for="item in lunbs" :key="item">
              <h3 class="medium">
                <img :src="item.bannerImg || item" alt="" class="tpp" />
              </h3>
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
// let id = 1000;
// import tableItem from "./component/tableItem.vue";
import {
  ndFrontMenu,
  getInfoById,
  delUploads,
  updateNav,
  getInfosByName,
  saveOrUpdate,
  uploads,
} from "@/api/wslapi.js";

export default {
  // components: {
  //   tableItem,
  // },
  data() {
    return {
      bannerId: "",
      lunbs: [],
      // 首页id的下标
      homeIndex: "",
      lbt1: [],
      lbt2: [],
      closepng: true,
      banners: [],
      onedisabled: false,
      twodisabled: false,
      threedisabled: false,
      fourdisabled: false,
      fivedisabled: false,
      // 点击的标题
      title: "",
      // 图片地址
      // pass: "",
      previewImg: false,
      // 左侧导航部分
      // 搜索输入内容
      tabId: "",
      filterText: "",
      tableData: [],
      navigationId: "",
      defaultProps: {
        children: "parentList",
        label: "name",
      },
      // 上传图片的临时地址
      allImg: [],
      // 第一个上传图片的url.... 和图片显示隐藏
      oneUrl: "",
      oneUpload: true,
      isCloseOne: false,
      // 第二个上传图片的url.... 和图片显示隐藏
      twoUrl: "",
      twoUpload: true,
      isCloseTwo: false,
      // 第三个上传图片的url.... 和图片显示隐藏
      threeUrl: "",
      isCloseThree: false,
      threeUpload: true,
      // 第四个上传图片的url.... 和图片显示隐藏
      fourUrl: "",
      isCloseFour: false,
      fourUpload: true,
      // 第五个上传图片的url.... 和图片显示隐藏
      fiveUrl: "",
      fiveUpload: true,
      isCloseFive: false,
      // form表单输入内容+图片上传

      ruleForm1: {
        image1: "",
        image2: "",
        image3: "",
        image4: "",
        image5: "",
      },
      ruleFormAll: [],
      // 弹窗当前激活菜单的index
      activeName: "first",
      // 弹窗图片的显示隐藏
    };
  },
  created() {
    this.getNav();
    // console.log(this.lbt1);
    // this.getSkey();
  },
  watch: {
    // 监听input里面的数据
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    
    closepngg() {
      this.previewImg = false;
    },
    // 预览弹窗点击banners事件
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    closeOne() {
      this.ruleForm1.image1 = "";
      this.oneUpload = true;
      this.isCloseOne = false;
      this.oneUrl = false;
      this.onedisabled = false;
      this.lunbs.splice(0, 1);
    },
    // 获取authcode
    // getSkey() {
    //   try {
    //   let authCode = window.location.href.split("?")[1].split("=")[1];
    //   let obj = {
    //     authCode: authCode,
    //   };
    //   algin(obj).then((res) => {
    //     console.log(res);
    //     let obj = res.data.data;
    //     this.Uid = obj.uid;
    //     this.OpenId = obj.openId;
    //     this.Skey = obj.skey;
    //     let data = {
    //       Uid: this.Uid,
    //       OpenId: this.OpenId,
    //       Skey: this.Skey,
    //     };
    //     window.localStorage.setItem("params", JSON.stringify(data));

    //   })
    // } catch (error) {
    //   this.alink()
    // }
    // },
    // 第一个上图片触发的事件
    oneRequest(item) {
      // console.log(item);
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt1M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
        this.oneUrl = false;
        this.oneUpload = true;
        this.ruleForm1.image1 = "";
        this.authenStatusOne = false;
        // this.$message.error("上传图片大小不能超过 3MB!");
        // this.oneUpload = true;
        this.isCloseOne = false;
        this.onedisabled = false;
      }
      if (!isLt1M) {
        this.oneUrl = false;
        this.oneUpload = true;
        this.ruleForm1.image1 = "";
        this.authenStatusOne = false;
        this.$message.error("上传图片大小不能超过 3MB!");
        // this.oneUpload = true;
        this.isCloseOne = false;
        this.onedisabled = false;
      }
      // return isJPG && isLt1M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt1M == true) {
        this.oneUpload = false;
        let formData = new FormData();
        this.isCloseOne = true;
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          // console.log(res);
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm1.image1 = item.url;
              this.lunbs.push(this.ruleForm1.image1);
              // this.onedisabled = true;
            });
          } else {
            this.$message.error("网络请求失败");
            // this.onedisabled = true;
          }
        });
      }
    },
    // 将上传图片的原路径赋值给临时路径
    oneHeadleChange(file, fileList) {
      this.oneUpload = false;
      this.oneUrl = URL.createObjectURL(file.raw);
      this.authenStatusOne = true;
    },
    closeTwo() {
      this.ruleForm1.image2 = "";
      this.twoUpload = true;
      this.isCloseTwo = false;
      this.twoUrl = false;
      this.twodisabled = false;
      this.lunbs.splice(1, 1);
    },
    // 第二个上图片触发的事件
    twoRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt1M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt1M) {
        this.twoUpload = true;
        this.$message.error("上传图片大小不能超过 3MB!");
        this.isCloseTwo = false;
        this.twoUrl = false;
        this.twodisabled = false;
        this.twoUrl = "";
      }
      // return isJPG && isLt1M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt1M == true) {
        this.twoUpload = false;
        let formData = new FormData();
        this.isCloseTwo = true;
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            // console.log(res.data.data);
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm1.image2 = item.url;
              this.lunbs.push(this.ruleForm1.image2);
              // this.twodisabled = true;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },

    twoHeadleChange(file, fileList) {
      this.twoUpload = false;
      this.twoUrl = URL.createObjectURL(file.raw);
      // this.twodisabled = true;
    },
    closeThree() {
      this.ruleForm1.image3 = "";
      this.threeUpload = true;
      this.isCloseThree = false;
      this.threeUrl = false;
      this.threedisabled = false;
      this.lunbs.splice(2, 1);
    },
    // 第三个上图片触发的事件
    threeRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt1M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt1M) {
        this.threeUrl = "";
        this.threeUpload = true;
        this.$message.error("上传图片大小不能超过 3MB!");
        this.isCloseThree = false;
        this.threeUrl = false;
        this.threedisabled = false;
      }
      // return isJPG && isLt1M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt1M == true) {
        this.threeUpload = false;
        let formData = new FormData();
        this.isCloseThree = true;
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm1.image3 = item.url;
              this.lunbs.push(this.ruleForm1.image3);
              // this.threedisabled = true;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },

    threeHeadleChange(file, fileList) {
      this.threeUpload = false;
      this.threeUrl = URL.createObjectURL(file.raw);
    },
    closeFour() {
      this.ruleForm1.image4 = "";
      this.fourUpload = true;
      this.isCloseFour = false;
      this.fourUrl = false;
      this.fourdisabled = false;
      this.lunbs.splice(3, 5);
    },
    // 第四个上图片触发的事件
    fourRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt1M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt1M) {
        this.fourUrl = "";
        this.fourUpload = true;
        this.$message.error("上传图片大小不能超过 3MB!");
        this.isCloseFour = false;
        this.fourUrl = false;
        this.fourdisabled = false;
      }
      // return isJPG && isLt1M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt1M == true) {
        this.fourUpload = false;
        let formData = new FormData();
        this.isCloseFour = true;
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm1.image4 = item.url;
              this.lunbs.push(this.ruleForm1.image4);
              // this.fourdisabled = true;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },

    fourHeadleChange(file, fileList) {
      (this.fourUpload = false), (this.fourUrl = URL.createObjectURL(file.raw));
    },
    closeFive() {
      this.ruleForm1.image5 = "";
      this.fiveUpload = true;
      this.isCloseFive = false;
      this.fiveUrl = false;
      this.fivedisabled = false;
      this.lunbs.splice(4, 5);
    },
    // 第五个上图片触发的事件
    fiveRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt1M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt1M) {
        this.fiveUrl = "";
        this.fiveUpload = true;
        this.$message.error("上传图片大小不能超过 3MB!");
        this.isCloseFive = false;
        this.fiveUrl = false;
        this.fivedisabled = false;
      }
      // return isJPG && isLt1M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt1M == true) {
        this.fiveUpload = false;
        let formData = new FormData();
        this.isCloseFive = true;
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm1.image5 = item.url;
              this.lunbs.push(this.ruleForm1.image5);
              // this.fivedisabled = true;
            });
          } else {
            this.$message.error("网络请求失败");
            this.fiveUrl = null;
          }
        });
      }
    },
    fiveHeadleChange(file, fileList) {
      this.fiveUpload = false;
      this.fiveUrl = URL.createObjectURL(file.raw);
    },
    // 监听input里面的数据返回
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 点击删除按钮触发事件
    deleteTab() {
      this.$confirm("此操作将清空该页所有数据, 是否继续?", "重置", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.ruleForm1.image1 = "";
          this.ruleForm1.image2 = "";
          this.ruleForm1.image3 = "";
          this.ruleForm1.image4 = "";
          this.ruleForm1.image5 = "";
          this.oneUrl = "";
          this.twoUrl = "";
          this.threeUrl = "";
          this.fourUrl = "";
          this.fiveUrl = "";
          this.onedisabled = false;
          this.twodisabled = false;
          this.threedisabled = false;
          this.fourdisabled = false;
          this.fivedisabled = false;
          this.$refs["ruleForm1"].validate((valid) => {
            if (!valid) {
              return;
            }
            let obj = {
              banners: [
                {
                  sort: 1,
                  bannerImg: this.ruleForm1.image1,
                },
                {
                  sort: 2,
                  bannerImg: this.ruleForm1.image2,
                },
                {
                  sort: 3,
                  bannerImg: this.ruleForm1.image3,
                },
                {
                  sort: 4,
                  bannerImg: this.ruleForm1.image4,
                },
                {
                  sort: 5,
                  bannerImg: this.ruleForm1.image5,
                },
              ],
              id: this.tabId,
            };
            console.log(obj);
            saveOrUpdate(obj).then((res) => {
              console.log(res);
            });
          });
          this.$message({
            type: "success",
            message: "删除轮播图成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 调用左侧导航栏接口
    getNav() {
      ndFrontMenu().then((res) => {
        if (res.data.code === "10000") {
          // console.log(res);
          this.tableData = res.data.data;
          res.data.data.map((item, index) => {
            // console.log(item);
            if (item.id === "6947dafe-0626-48d9-8776-572f022bfe84") {
              this.homeIndex = index;
            }
            // setTimeout(() => {
            //   let leaders = document.getElementsByClassName(
            //     "el-tree-node__content"
            //   );
            //   leaders[this.homeIndex].style.color = "#606266";
            //   leaders[this.homeIndex].style.background = "#fff";
            //   leaders[this.homeIndex].style.cursor = "not-allowed";
            //   // leaders[this.homeIndex].classList.add("stop")
            // });
          });
          //默认选中的节点并把节点赋值到title
          this.$nextTick(function() {
            // 如果树的内容数组第一个对象的内容不等于首页的id
            if (
              this.tableData[0].id !== "6947dafe-0626-48d9-8776-572f022bfe84"
            ) {
              // 默认选中第一个对象
              this.$refs.tree.setCurrentKey(this.tableData[0].id);
              // 把第一个对象的name赋值给标题title
              this.title = this.tableData[0].name;
              // 调用获取id内容的接口获取当前id的数据
              let Obj = {
                menuId: this.tableData[0].id,
              };
              getInfoById(Obj).then((res) => {
                // 第一栏判断
                if (res.data.code === "10000") {
                  this.tabId = res.data.data.id;
                  this.bannerId = res.data.data.banners[0].id;
                  if (
                    res.data.data.banners[0] !== "" &&
                    res.data.data.banners[0] !== undefined &&
                    res.data.data.banners[0] !== null
                  ) {
                    if (res.data.data.banners[0].bannerImg == "") {
                      this.onedisabled = false;
                    } else if (res.data.data.banners[0].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[0].bannerImg);
                      this.ruleForm1.image1 =
                        res.data.data.banners[0].bannerImg;
                      this.oneUrl = this.ruleForm1.image1;
                      this.onedisabled = true;
                    }
                  }
                  // 第二栏判断
                  if (
                    res.data.data.banners[1] !== "" &&
                    res.data.data.banners[1] !== undefined &&
                    res.data.data.banners[1] !== null
                  ) {
                    if (res.data.data.banners[1].bannerImg == "") {
                      this.onedisabled = false;
                    } else if (res.data.data.banners[1].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[1].bannerImg);
                      this.ruleForm1.image2 =
                        res.data.data.banners[1].bannerImg;
                      this.twoUrl = res.data.data.banners[1].bannerImg;
                      this.twodisabled = true;
                    }
                  }
                  // 第三栏判断
                  if (
                    res.data.data.banners[2] !== "" &&
                    res.data.data.banners[2] !== undefined &&
                    res.data.data.banners[2] !== null
                  ) {
                    if (res.data.data.banners[2].bannerImg == "") {
                      this.threedisabled = false;
                    } else if (res.data.data.banners[2].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[2].bannerImg);
                      this.ruleForm1.image3 =
                        res.data.data.banners[2].bannerImg;
                      this.threeUrl = res.data.data.banners[2].bannerImg;
                      this.threedisabled = true;
                    }
                  }
                  // 第四栏判断
                  if (
                    res.data.data.banners[3] !== "" &&
                    res.data.data.banners[3] !== undefined &&
                    res.data.data.banners[3] !== null
                  ) {
                    if (res.data.data.banners[3].bannerImg == "") {
                      this.fourdisabled = false;
                    } else if (res.data.data.banners[3].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[3].bannerImg);
                      this.ruleForm1.image4 =
                        res.data.data.banners[3].bannerImg;
                      this.fourUrl = res.data.data.banners[3].bannerImg;
                      this.fourdisabled = true;
                    }
                  }
                  // 第五栏判断
                  if (
                    res.data.data.banners[4] !== "" &&
                    res.data.data.banners[4] !== undefined &&
                    res.data.data.banners[4] !== null
                  ) {
                    if (res.data.data.banners[4].bannerImg == "") {
                      this.fivedisabled = false;
                    } else if (res.data.data.banners[4].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[4].bannerImg);
                      this.ruleForm1.image5 =
                        res.data.data.banners[4].bannerImg;
                      this.fiveUrl = res.data.data.banners[4].bannerImg;
                      this.fivedisabled = true;
                    }
                  }
                  // // 第六栏判断
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            } else if (
              this.tableData[0].id === "6947dafe-0626-48d9-8776-572f022bfe84"
            ) {
              // 如果树的内容数组第一个对象的内容等于首页的id 采用第二个
              this.$refs.tree.setCurrentKey(this.tableData[1].id);
              this.title = this.tableData[1].name;
              let Obj = {
                menuId: this.tableData[1].id,
              };
              getInfoById(Obj).then((res) => {
                // 第一栏判断
                if (res.data.code === "10000") {
                  this.tabId = res.data.data.id;
                  this.bannerId = res.data.data.banners.id;
                  if (
                    res.data.data.banners[0] !== "" &&
                    res.data.data.banners[0] !== undefined &&
                    res.data.data.banners[0] !== null
                  ) {
                    if (res.data.data.banners[0].bannerImg == "") {
                      this.onedisabled = false;
                    } else if (res.data.data.banners[0].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[0].bannerImg);
                      this.ruleForm1.image1 =
                        res.data.data.banners[0].bannerImg;
                      this.oneUrl = this.ruleForm1.image1;
                      this.onedisabled = true;
                    }
                  }
                  // 第二栏判断
                  if (
                    res.data.data.banners[1] !== "" &&
                    res.data.data.banners[1] !== undefined &&
                    res.data.data.banners[1] !== null
                  ) {
                    if (res.data.data.banners[1].bannerImg == "") {
                      this.onedisabled = false;
                    } else if (res.data.data.banners[1].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[1].bannerImg);
                      this.ruleForm1.image2 =
                        res.data.data.banners[1].bannerImg;
                      this.twoUrl = res.data.data.banners[1].bannerImg;
                      this.twodisabled = true;
                    }
                  }
                  // 第三栏判断
                  if (
                    res.data.data.banners[2] !== "" &&
                    res.data.data.banners[2] !== undefined &&
                    res.data.data.banners[2] !== null
                  ) {
                    if (res.data.data.banners[2].bannerImg == "") {
                      this.threedisabled = false;
                    } else if (res.data.data.banners[2].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[2].bannerImg);
                      this.ruleForm1.image3 =
                        res.data.data.banners[2].bannerImg;
                      this.threeUrl = res.data.data.banners[2].bannerImg;
                      this.threedisabled = true;
                    }
                  }
                  // 第四栏判断
                  if (
                    res.data.data.banners[3] !== "" &&
                    res.data.data.banners[3] !== undefined &&
                    res.data.data.banners[3] !== null
                  ) {
                    if (res.data.data.banners[3].bannerImg == "") {
                      this.fourdisabled = false;
                    } else if (res.data.data.banners[3].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[3].bannerImg);
                      this.ruleForm1.image4 =
                        res.data.data.banners[3].bannerImg;
                      this.fourUrl = res.data.data.banners[3].bannerImg;
                      this.fourdisabled = true;
                    }
                  }
                  // 第五栏判断
                  if (
                    res.data.data.banners[4] !== "" &&
                    res.data.data.banners[4] !== undefined &&
                    res.data.data.banners[4] !== null
                  ) {
                    if (res.data.data.banners[4].bannerImg == "") {
                      this.fivedisabled = false;
                    } else if (res.data.data.banners[4].bannerImg !== "") {
                      this.lunbs.push(res.data.data.banners[4].bannerImg);
                      this.ruleForm1.image5 =
                        res.data.data.banners[4].bannerImg;
                      this.fiveUrl = res.data.data.banners[4].bannerImg;
                      this.fivedisabled = true;
                    }
                  }
                  // // 第六栏判断
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            }
          });
        }
      });
    },
    // 树形图节点点击获取点击的id
    handleNodeClick(data) {
      this.onedisabled = false;
      this.twodisabled = false;
      this.threedisabled = false;
      this.fourdisabled = false;
      this.fivedisabled = false;
      this.$nextTick(() => {
        this.title = data.name;
        let obj = {
          menuId: data.id,
        };
        // 第一栏清空 图片可上传
        // this.ruleForm1 = {
        //   name1: "",
        //   image1: "",
        // };
        // this.oneUrl = "";
        // this.onedisabled = false;
        // 第二栏清空 图片可上传
        // this.ruleForm2 = {
        //   name2: "",
        //   image2: "",
        // };
        // this.twoUrl = "";
        // this.authenStatusTwo = false;
        // // 第三栏清空 图片可上传
        // this.ruleForm3 = {
        //   name3: "",
        //   image3: "",
        // };
        // this.threeUrl = "";
        // this.authenStatusThree = false;
        // // 第四栏清空 图片可上传
        // this.ruleForm4 = {
        //   name4: "",
        //   image4: "",
        // };
        // this.fourUrl = "";
        // this.authenStatusFour = false;
        // // 第五栏清空 图片可上传
        // this.ruleForm5 = {
        //   name5: "",
        //   image5: "",
        // };
        // this.fiveUrl = "";
        // this.authenStatusFive = false;
        // // 第六栏清空 图片可上传
        // this.ruleForm6 = {
        //   name6: "",
        //   image6: "",
        // };
        // this.sixUrl = "";
        if (data.id === "6947dafe-0626-48d9-8776-572f022bfe84") {
          this.isInput = true;
          (this.onedisabled = true),
            (this.towdisabled = true),
            (this.threedisabled = true),
            (this.fourisabled = true),
            (this.fivedisabled = true),
            // (this.authenStatusSix = true);
            this.$message({
              showClose: true,
              message: "当前ID禁止上传数据！",
              type: "warning",
            });
          return;
        } else {
          this.isInput = false;
          let Obj = {
            menuId: data.id,
          };
          getInfoById(obj).then((res) => {
            console.log(this.lbt1);
            this.lunbs = [];
            this.lbt1 = res.data.data.banners;
            this.lbt2 = res.data.data.banners.bannerImg;

            console.log(res.data.data.banners);
            console.log(res);
            if (res.data.code === "10000") {
              this.lbt1.map((item) => {
                if (item.bannerImg) {
                  this.lunbs.push(item);
                }
                //  this.lunbs=[]
              });
              this.bannerId = res.data.data.banners.id;
              this.tabId = res.data.data.id;
              this.ruleForm1 = {
                image1: "",
                image2: "",
                image3: "",
                image4: "",
                image5: "",
              };
              this.isCloseOne = false;
              this.isCloseTwo = false;
              this.threeUpload = true;
              this.twoUpload = true;
              this.fourUpload = true;
              this.fiveUpload = true;
              this.isCloseThree = false;
              this.isCloseFour = false;
              this.isCloseFive = false;
              this.oneUpload = true;
              this.oneUrl = "";
              this.twoUrl = "";
              this.threeUrl = "";
              this.fourUrl = "";
              this.fiveUrl = "";
              if (
                res.data.data.banners[0] !== "" &&
                res.data.data.banners[0] !== undefined &&
                res.data.data.banners[0] !== null
              ) {
                this.ruleForm1.image1 = res.data.data.banners[0].bannerImg;
                this.oneUrl = this.ruleForm1.image1;
                this.onedisabled = true;
                this.oneUpload = false;
                this.isCloseOne = true;
                this.ruleFormAll.push(res.data.data.banners[0].bannerImg);
              }
              if (
                res.data.data.banners[0].bannerImg == "" ||
                res.data.data.banners[0].bannerImg == undefined ||
                res.data.data.banners[0].bannerImg == null
              ) {
                this.onedisabled = false;
              }
              if (
                res.data.data.banners[1] !== "" &&
                res.data.data.banners[1] !== undefined &&
                res.data.data.banners[1] !== null
              ) {
                this.ruleForm1.image2 = res.data.data.banners[1].bannerImg;
                this.twoUpload = false;
                this.twoUrl = this.ruleForm1.image2;
                this.twodisabled = true;
                this.isCloseTwo = true;
                this.ruleFormAll.push(res.data.data.banners[1].bannerImg);
              }
              if (
                res.data.data.banners[1].bannerImg == "" ||
                res.data.data.banners[1].bannerImg == undefined ||
                res.data.data.banners[1].bannerImg == null
              ) {
                this.twodisabled = false;
              }
              if (
                res.data.data.banners[2] !== "" &&
                res.data.data.banners[2] !== undefined &&
                res.data.data.banners[2] !== null
              ) {
                this.threeUpload = false;
                this.ruleForm1.image3 = res.data.data.banners[2].bannerImg;
                this.threeUrl = this.ruleForm1.image3;
                this.threedisabled = true;
                this.isCloseThree = true;
                this.ruleFormAll.push(res.data.data.banners[2].bannerImg);
              }
              if (
                res.data.data.banners[2].bannerImg == "" ||
                res.data.data.banners[2].bannerImg == undefined ||
                res.data.data.banners[2].bannerImg == null
              ) {
                this.threedisabled = false;
              }
              if (
                res.data.data.banners[3] !== "" &&
                res.data.data.banners[3] !== undefined &&
                res.data.data.banners[3] !== null
              ) {
                this.fourUpload = false;
                this.ruleForm1.image4 = res.data.data.banners[3].bannerImg;
                this.fourUrl = this.ruleForm1.image4;
                this.isCloseFour = true;
                this.fourdisabled = true;
                this.ruleFormAll.push(res.data.data.banners[3].bannerImg);
              }
              if (
                res.data.data.banners[3].bannerImg == "" ||
                res.data.data.banners[3].bannerImg == undefined ||
                res.data.data.banners[3].bannerImg == null
              ) {
                this.fourdisabled = false;
              }
              if (
                res.data.data.banners[4] !== "" &&
                res.data.data.banners[4] !== undefined &&
                res.data.data.banners[4] !== null
              ) {
                this.fiveUpload = false;
                this.ruleForm1.image5 = res.data.data.banners[4].bannerImg;
                this.fiveUrl = this.ruleForm1.image5;
                this.isCloseFive = true;
                this.fivedisabled = true;
                this.ruleFormAll.push(res.data.data.banners[4].bannerImg);
              }
              if (
                res.data.data.banners[4].bannerImg == "" ||
                res.data.data.banners[4].bannerImg == undefined ||
                res.data.data.banners[4].bannerImg == null
              ) {
                this.fivedisabled = false;
              }
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },

    // 点击按钮取消更改导航信息
    cancel() {
      let obj = {
        menuId: this.tabId,
      };
      getInfoById(obj).then((res) => {
        // 第一栏判断
        if (res.data.code === "10000") {
          this.tabId = res.data.data.id;
          this.bannerId = res.data.data.banners.id;
          if (
            res.data.data.banners[0] !== "" &&
            res.data.data.banners[0] !== undefined &&
            res.data.data.banners[0] !== null
          ) {
            if (
              res.data.data.banners[0].bannerImg == ""
              // res.data.data.banners[0].tabImg == ""
            ) {
              this.onedisabled = false;
            } else if (
              res.data.data.banners[0].bannerImg !== ""
              // res.data.data.tabs[0].tabImg !== ""
            ) {
              // this.ruleForm1.name1 = res.data.data.tabs[0].tabName;
              this.ruleForm1.image1 = res.data.data.banners[0].bannerImg;
              this.oneUrl = this.ruleForm1.image1;
              this.onedisabled = true;
            }
          }
          // 第二栏判断
          if (
            res.data.data.banners[1] !== "" &&
            res.data.data.banners[1] !== undefined &&
            res.data.data.banners[1] !== null
          ) {
            if (res.data.data.banners[1].bannerImg == "") {
              this.twodisabled = false;
            } else if (res.data.data.banners[1].bannerImg !== "") {
              this.ruleForm1.image2 = res.data.data.banners[1].bannerImg;
              this.twoUrl = this.ruleForm1.image2;
              this.twodisabled = true;
            }
          }
          // 第三栏判断
          if (
            res.data.data.banners[2] !== "" &&
            res.data.data.banners[2] !== undefined &&
            res.data.data.banners[2] !== null
          ) {
            if (res.data.data.banners[2].bannerImg == "") {
              this.threedisabled = false;
            } else if (res.data.data.banners[2].bannerImg !== "") {
              this.ruleForm1.image3 = res.data.data.banners[2].bannerImg;
              this.threeUrl = this.ruleForm1.image3;
              this.threedisabled = true;
            }
          }
          // 第四栏判断
          if (
            res.data.data.banners[3] !== "" &&
            res.data.data.banners[3] !== undefined &&
            res.data.data.banners[3] !== null
          ) {
            if (res.data.data.banners[3].bannerImg == "") {
              this.fourdisabled = false;
            } else if (res.data.data.banners[3].bannerImg !== "") {
              this.ruleForm1.image4 = res.data.data.banners[3].bannerImg;
              this.fourUrl = this.ruleForm1.image4;
              this.fourdisabled = true;
            }
          }
          // 第五栏判断
          if (
            res.data.data.banners[4] !== "" &&
            res.data.data.banners[4] !== undefined &&
            res.data.data.banners[4] !== null
          ) {
            if (res.data.data.banners[4].bannerImg == "") {
              this.fivedisabled = false;
            } else if (res.data.data.banners[4].bannerImg !== "") {
              this.ruleForm1.image5 = res.data.data.banners[4].bannerImg;
              this.fiveUrl = this.ruleForm1.image5;
              this.fivedisabled = true;
            }
          }
          // // 第六栏判断
        } else {
          this.$message.error(res.data.msg);
        }
      });
      // .catch((error) => {
      //   this.$message.error(error.message);
      //   // console.log(res.data.msg);
      // });
      this.$message({
        message: "取消成功",
        type: "success",
      });
    },

    // 点击按钮保存导航信息
    saveTable() {
      this.$refs["ruleForm1"].validate((valid) => {
        if (!valid) {
          return;
        }
        let obj = {
          banners: [
            {
              sort: 1,
              bannerImg: this.ruleForm1.image1,
            },
            {
              sort: 2,
              bannerImg: this.ruleForm1.image2,
            },
            {
              sort: 3,
              bannerImg: this.ruleForm1.image3,
            },
            {
              sort: 4,
              bannerImg: this.ruleForm1.image4,
            },
            {
              sort: 5,
              bannerImg: this.ruleForm1.image5,
            },
          ],
          id: this.tabId,
        };
        console.log(obj);
        saveOrUpdate(obj).then((res) => {
          console.log(res);
          if (res.data.code === "10000") {
            this.$message({
              message: "保存成功",
              type: "success",
            });
          } else {
            this.$message.error("保存失败，请重试！");
          }
        });
      });
    },
    //预览按钮触发事件
    previewbtn() {
      this.previewImg = true;
      console.log(this.lbt1);
    },
    // 接收子组件传值
    // getMsgFormSon (data) {
    //   this.pass = data;
    // },
    // 关闭预览页面
    closePreview() {
      this.window.location.reload();
      this.previewImg = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.bigbox{
  // position: absolute;
  // height: 100%;
  // width: 100%;
  overflow: auto;
}
.odiv{
  width: 24px;
  height: 100%;
  z-index: 20;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
}
 .but {
    //  width: 350px;
    //  float:right;
      position: absolute;
      float: left;
      // left: 840px;
      right: 24px;
      height: 32px;
      // margin-right:0 !important;
      // padding: 0 !important;
      margin:0;
      top: 46px;
      // right: 24px;
      /deep/ .el-button {
        margin-right: 16px;
        margin-left: 0;
        height: 32px;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 32px;
      }
      .btn1 {
        border: 1px solid #004fe0;
        color: #004fe0;
        height: 32px !important;
      }
      .btn2 {
        border: 1px solid #004fe0;
        height: 32px !important;
        color: #004fe0;
      }
      .keep {
        height: 32px;
        color: #fff !important;
        background-color: #004fe0;
      }
    }
/deep/ .el-input__icon:after {
  margin-top: 65px;
  font-size: 20px !important;
  color: #56565a;
}
/deep/ .el-input__inner:focus {
  border-color: #2672ed;
  box-shadow: 0 0 0 2px rgb(197, 208, 238);
}
// /deep/.el-tree--highlight-current
//   .el-tree-node.is-current
//   > .el-tree-node__content {
//   background-color: #e7ebf0 !important;
//   color: #004fe0 !important;
// }
// .el-tree-node:focus > .el-tree-node__content {
//   // background-color: #fff;//节点的背景颜色
//   color: #004fe0; //节点的字体颜色
// }
// 树形导航的样式以及卡片里的内容
.el-tree {
  font-size: 14px;
  font-weight: 500;
  height: 670px;
  width: 278px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
/* 树形导航点击是的颜色和背景图 */

/deep/.el-tree-node:focus > .el-tree-node__content {
  background-color: #e7ebf0;
  color: #004fe0;
}
/* 树形导航点击是的颜色和背景图 (点击其他地方仍保留选中状态) */
// /deep/.el-tree--highlight-current
//   .el-tree-node.is-current
//   > .el-tree-node__content {
//   background-color: #e7ebf0;
//   color: #004fe0;
// }

* {
  vertical-align: baseline !important;
}
.closepng {
  width: 24px;
  height: 24px;
  z-index: 100;
  // float: right;
  position: absolute;
  left: 0;
  top: 0;
}
.tpp {
  width: 100%;
  height: 250px;
}
.el-carousel--card {
  margin-top: 80px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-tree {
  margin-top: 24px;
  font-size: 14px;
  height: 670px;
  overflow-y: auto;
}
body {
  margin-left: 24px;
}
.box-card {
  // overflow-x: hidden !important;
  display: flex;
  position: relative;
  margin-right: 24px;
  margin-top: 80px;
  margin-left: 24px;
  padding-left: 25px;
  padding-right: 24px;
  padding-top: 18px;
  overflow-x: hidden;
  z-index: 11;
  // width: 100%;
   
  /deep/.el-card__body {
    width: 100%;
    padding: 0px;
   
  }
  .one {
    display: flex;
    justify-content: space-between;
    // position: absolute;
    // 面包屑
    .el-breadcrumb {
      font-size: 20px;
      // line-height: 29px;
      // height: 29px;
      position: absolute;
      // position: relative;
      top: 22px;
      left: 24px;
    }
   
  }
  .card_content {
    margin-top: 48px;
    display: flex;
    .card_left {
      position: relative;
      // left: -20px;
      width: 278px;
      .filter-tree {
        width: 278px;
      }
      .wz {
        font-size: 20px;
        font-weight: 600;
        position: absolute;
        top: 2.2vw;
      }
      /deep/ .el-input__inner {
        position: relative;
        margin-bottom: 24px;
        margin-top: 84px;
        width: 278px;
        height: 32px;
      }
      .search {
        cursor: pointer;
        position: absolute;
        top: 90px;
        left: 250px;
        width: 18px;
        height: 18px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .card_middle {
      display: flex;
      flex-direction: column;
      width: 980px;
      height: 100%;
      margin-left: 115px;
      padding-top: 84px;
      .demo-ruleForm {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        .el-form-item {
          height: 40px;
          margin-bottom: 89px;
        }
      }
      /deep/ .el-input__inner {
        position: relative;
        margin-bottom: 24px;
        margin-top: 27px;
        width: 278px;
        height: 32px;
      }
    }
    .card_right {
      width: 455px;
      height: 100%;
      padding-top: 51px;
      margin-right: 168px;
    }
  }
}
// 弹窗
.seeUp {
  text-align: left;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  // position: relative;
  .images {
    width: 100%;
    height: 405px;
    margin-top: 90px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .preview {
    position: relative;
    width: 1200px;
    height: 450px;
    background-color: #fff;
    .close_img {
      width: 30px;
      height: 30px;
      position: absolute;
      right: -13px;
      top: -13px;
      z-index: 100;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
/deep/ .el-banners__nav-scroll {
  position: relative;
  display: flex;
  justify-content: center;
  height: 63px;
}
/deep/ .el-banners__item {
  margin: 0;
  padding: 0;
  width: 150px;
  height: 100%;
  text-align: center;
  padding-top: 15px;
  font-size: 16px;
  color: #666;
  font-weight: 400;
  &:hover {
    background-color: rgb(197, 198, 201);
  }
}
/deep/ .is-top {
  margin-bottom: 0;
}
/deep/ .el-banners__content {
  width: 100%;
  height: 387px;
}
/deep/ .el-tab-pane {
  margin-top: 40px;
  width: 100%;
  height: 347px;
  img {
    width: 100%;
    height: 100%;
  }
}
// 上传图片样式部分
// .avatar_top {
//   margin-top: 52px;
// }
.avatar-uploader {
  position: relative;
  width: 300px;
  height: 101px;
  margin: 0;
  margin-left: 10px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  .avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .upImg {
    display: flex;
    position: absolute;
    top: 29px;
    left: 124px;
    div {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      margin-top: 0;
      vertical-align: top !important;
      img {
        width: 100%;
        height: 100%;
        // margin-bottom:100px ;
      }
    }
    span {
      height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: #45484d;
      line-height: 24px;
    }
  }
}
.content_one {
  position: relative;
}
.close_small {
  position: absolute;
  top: -15px;
  // right: 0px;
  left: 300px;
  width: 24px;
  height: 24px;
  z-index: 100;
  img {
    width: 100%;
    height: 100%;
    // margin-bottom:60px ;
  }
}
// 迭代图片提示
.hint {
  user-select: none;
  position: absolute;
  color: #b7b7b7;
  font-size: 14px;
  height: 0;
  left: 10px;
  bottom: 6px;
}
</style>
